<template>
  <div id="student">
    <h1>学生名单</h1>
    <ul>
      <li
        class="stdname"
        v-for="(item, index) in std[stuId]"
        :key="index"
        @drop.prevent="drop()"
        @dragover.prevent="allowDrop()"
      >
        <p
          @dragstart="dragStart()"
          draggable="true"
          :id="item.id"
          class="move"
          :name="std[stuId][index].group"
        >
          {{ item.name }}
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "student",
  methods: {
    allowDrop() {},
    dragStart() {
      event.dataTransfer.setData("Text", event.target.id);
      localStorage.id = event.target.id;
      this.liName = event.target.parentNode.getAttribute("name");
    },
    drop() {
      let data = event.dataTransfer.getData("Text");
      let thisId = event.target.id;
      if (!event.target.innerText) {
        if (event.target.innerHTML) {
          event.target.replaceChild(
            document.getElementById(data),
            event.target.getElementsByTagName("p")[0]
          );
        }
        event.target.appendChild(document.getElementById(data));
      } //放下交换的逻辑代码
      else if (this.liName && this.liName.includes("s")) {
        //    let item = JSON.parse(localStorage.list);
        //    let beforId = item.filter(function (item,index) {
        //     return item.id === parseInt(thisId)
        // });
        //克隆放下时那个节点并append给之前的li元素
        this.before = event.target.cloneNode(true);
        let oLi = document.getElementsByTagName("li");
        for (let index = 0; index < oLi.length; index++) {
          const element = oLi[index];
          //  console.log(element.getAttribute("name"));
          if (element.getAttribute("name") === this.liName) {
            console.log(element.getAttribute("name"));
            element.appendChild(this.before);
          }
        }
        console.log(1);
        //  this.before.appendChild(document.getElementById(thisId));
        // document.getElementById(localStorage.id+"li").appendChild(this.before)
        //替换当前li下的p节点
        event.target.parentNode.replaceChild(
          document.getElementById(localStorage.id),
          event.target.parentNode.childNodes[0]
        );
      }
    },
  },
  props: {
    stuId: {
      type: Number,
    },
    stucurId: {
      type: Number,
    },
    stuList:{},
  },
  mounted() {
    // 保存本地的功能onbeforeunload mousemove
    document
      .getElementsByClassName("saveStudname")[0]
      .addEventListener("click", () => {
        let seatArr2 = [];
        let sallLi2 = document.querySelectorAll(".stdname");
        for (let index = 0; index < sallLi2.length; index++) {
          let obj = {};
          const element = sallLi2[index];
          // console.log(element.querySelector());
          if (element.innerText) {
            obj = {
              id: element.getElementsByTagName("p")[0].id,
              name: element.getElementsByTagName("p")[0].innerText.trim(),
              group: element.getElementsByTagName("p")[0].getAttribute("name"),
              bk: element.getElementsByTagName("p")[0].style.background,
            };
          } else {
            obj = {
              id: "",
              name: "",
              group: "",
              bk: "",
            };
          }
          seatArr2.push(obj);
        }
        console.log(seatArr2);
        localStorage.stdnameList = JSON.stringify(seatArr2);
      });
    if (localStorage.stdnameList) {
      let stdnameList = JSON.parse(localStorage.stdnameList);
      let stdname = document.querySelectorAll(".stdname");
      for (let index = 0; index < stdname.length; index++) {
        const element = stdname[index];
        element.getElementsByTagName("p")[0].innerText =
          stdnameList[index].name;
        element.getElementsByTagName("p")[0].id = stdnameList[index].id;
        element
          .getElementsByTagName("p")[0]
          .setAttribute("name", stdnameList[index].group);
        element.getElementsByTagName("p")[0].style.background =
          stdnameList[index].bk;
      }
    }
  },
  created() {
    for (let index = 0; index < this.stuList.length; index++) {
      const element = this.stuList[index];
      this.std.push(this.stuList[index].list)
    }
    console.log(this.stuList)

    //刷新
    console.log(document.getElementsByClassName("updates")[0]);
    document.getElementsByClassName("updates")[0].addEventListener("click",()=>{
      console.log(1);
      location.reload(true);
    })
  },
  data() {
    return {
      before: null,
      liName: null,
      std:[]
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- 添加"scoper""属性能够限制 这个css指对当前组件生效 -->
<style scoped>
* {
  margin: 0;
  padding: 0;
}
#student {
  width: 1000px;
  margin: 0 auto;
  margin-top: 60px;
}
h1 {
  width: 100%;
  text-align: center;
}
.filesJson {
  margin: 6px 0;
}
li {
  list-style: none;
  width: 124px;
  height: 50px;
  line-height: 50px;
  background: cornsilk;
  border: 1px solid black;
}
li p {
  width: 100%;
  height: 100%;
  text-align: center;
  margin: 0;
  font-weight: bold;
}
ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
</style>
